<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑定时任务' : '新增定时任务'"
      :visible.sync="dialogVisible"
      width="700px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        :size="size"
        label-width="120px"
        :show-message="showMessage"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="任务名" prop="jobName">
              <el-input
                v-model.trim="ruleForm.jobName"
                placeholder="请输入任务名"
                type="text"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务分组" prop="jobGroup">
              <el-input
                v-model.trim="ruleForm.jobGroup"
                placeholder="请输入任务分组"
                type="text"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务key" prop="jobKey">
              <el-input
                v-model.trim="ruleForm.jobKey"
                placeholder="请输入任务key"
                type="text"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="超时策略" prop="instruction">
              <el-select v-model="ruleForm.instruction" style="width: 100%;" placeholder="请选择超时策略">
                <el-option
                  v-for="(item, index) in obj.instructionList"
                  :key="index"
                  :label="item.label"
                  :value="Number(item.code)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="cron表达式" prop="cron">
              <el-input
                v-model="ruleForm.cron"
                placeholder="请输入cron表达式"
                type="text"
                show-word-limit
                autocomplete="off"
              >
                <el-button
                  slot="append"
                  type="primary"
                  icon="el-icon-time"
                  @click="cronVisible = true"
                >生成cron表达式</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务参数" prop="jobParams">
              <el-input
                v-model.trim="ruleForm.jobParams"
                placeholder="请输入任务参数"
                type="text"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务状态" prop="jobStatus">
              <el-radio-group v-model="ruleForm.jobStatus">
                <el-radio
                  v-for="(item, index) in obj.jobStatusList"
                  :key="index"
                  :label="Number(item.code)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model.trim="ruleForm.sort"
                :min="0"
                placeholder="请输入排序"
                style="width: 100%;"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务描述" prop="description">
              <el-input
                v-model.trim="ruleForm.description"
                placeholder="请输入任务描述"
                type="textarea"
                show-word-limit
                autocomplete="off"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="生成cron表达式" width="700px" :visible.sync="cronVisible">
      <crontab
        v-model="ruleForm.cron"
        class="crontab"
        @hide="cronVisible = false"
      />
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin/save'
import Crontab from '@/components/Crontab'
export default {
  name: 'ScheduledTaskSave',
  components: { Crontab },
  mixins: [mixin],
  data() {
    return {
      cronVisible: false, // cron生成器弹窗
      // 表单校验
      rules: {
        jobName: [{ required: true, message: '请输入任务名', trigger: 'change' }],
        jobGroup: [{ required: true, message: '请输入任务分组', trigger: 'change' }],
        jobKey: [{ required: true, message: '请输入任务key', trigger: 'change' }],
        instruction: [{ required: true, message: '请选择超时策略', trigger: 'change' }],
        cron: [{ required: true, message: '请输入cron表达式', trigger: 'change' }],
        jobStatus: [{ required: true, message: '请选择任务状态', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 弹出窗口加载
    openDialog(rows) {
      this.dialogVisible = true
      if (rows) {
        this.ruleForm = { ...this.ruleForm, ...rows }
      } else {
        this.ruleForm = { sort: 0, instruction: 2, jobStatus: 1 }
      }
    }
  }
}
</script>
